<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
			<el-form :inline="true">
				<el-form-item>
					<el-button type="warning" @click="fnOpenRestaurant(0)">新增餐厅</el-button>
				</el-form-item>
				<!--<el-form-item>-->
					<!--<el-button type="primary" @click="fnOpenUseState">包厢使用状态</el-button>-->
				<!--</el-form-item>-->
				<el-form-item class="sort">
					<el-button type="info" @click="fnSaveSolt" :disabled="hasSolt">保存排序</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--餐厅列表-->
		<el-table :data="restaurants" border v-loading="restaurantsLoading" class="restaurants-list">
			<el-table-column type="index" label="#" width="60">
			</el-table-column>
			<el-table-column prop="Name" label="餐厅名称">
			</el-table-column>
			<el-table-column prop="Capacity" label="可容纳人数">
			</el-table-column>
			<el-table-column prop="AllowShare" label="用餐冲突验证" :formatter="fnAllowShareFormat">
			</el-table-column>
			<el-table-column label="操作" width="180">
				<template scope="scope">
					<i class="el-icon-custom-upward sort-icon" @click="fnSortUpward(scope.$index)"></i>
				    <i class="el-icon-custom-down sort-icon" @click="fnSortDown(scope.$index)"></i>
					<el-tooltip class="item" effect="dark" content="修改" placement="bottom">
						<el-button type="warning" size="mini" icon="custom-fold"  @click="fnOpenRestaurant(scope.row.ID)"></el-button>
					</el-tooltip>
				    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
				      	<el-button type="danger" size="mini" icon="custom-delete"  @click="fnDelete(scope.row.ID)"></el-button>
				    </el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		
		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="100px" ref="addForm">
				<el-form-item label="餐厅名称">
					<el-input v-model="addForm.name" placeholder="餐厅名称" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="可容纳人数">
					<el-input v-model="addForm.capacity" placeholder="可容纳人数" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="是否验证">
					<el-radio v-model="addForm.allowShare" label="0">需要冲突验证</el-radio>
					<el-radio v-model="addForm.allowShare" label="1">不需要冲突验证</el-radio>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="fnAddRestaurant">提交</el-button>
			</div>
		</el-dialog>

		<!--包厢使用状态界面-->
		<el-dialog title="包厢使用状态" size="large" v-model="useFormVisible" :close-on-click-modal="false">
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
				<el-form :inline="true">
					<el-form-item>
						<el-date-picker v-model="filters.StartDate" type="date" placeholder="开始日期" @change="fnGetStart"></el-date-picker>
					</el-form-item>
					<el-form-item>起6天内的包厢使用状态</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="fnGetUseState">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>

			<!--餐厅列表-->
			<el-table :data="allUseDate" border v-loading="useStateLoading" class="restaurants-list">
				<el-table-column fixed prop="Room.Name" label="" width="100">
				</el-table-column>
				<el-table-column  :label="item" v-for="(item, key) in allUseDateHeader">
					<template scope="scope">
						<span v-for="booking in bookingInfo[scope.$index][key].Booking">{{booking}} </span>
					</template>
				</el-table-column>
			</el-table>

			<div slot="footer" class="dialog-footer">
				<el-button @click.native="useFormVisible = false">取消</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import Vue from 'vue'
	import Svc from '../../service/index.js'
    import moment from 'moment'
	export default {
		data() {
			return {
				restaurants : [],
				restaurantsLoading : false,
				//新增内容
				addForm : {
					name : '',
					allowShare : "0",
                    capacity : 0
				},
				addFormVisible : false,
				hasSolt : true,
                roomID : 0,  // 当前roomID
                useFormVisible : false,
                filters : {
                    StartDate : moment(new Date()).format('YYYY-MM-DD')
				},
                useStateLoading : false,
				allUseDate : [], //所有的包厢使用详情(包括包厢信息)
                bookingInfo : [], //所有的包厢使用详情(不包括包厢信息)
				allUseDateHeader : [] //包厢使用的时段
			}
		},
		methods: {
			//显示message提示框
            openMessage(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
		    },
		    //格式化 -> 是否需要验证
		    fnAllowShareFormat(row, column){
                var val = row[column.property];
                if (val) {
                	val = '不需要'
                } else {
                	val = '需要'
                }
	          	return val; 
		    },
		    //获取所有餐厅
		    fnGetRestaurant(){
		    	var that = this
	            Svc.fnGetData('/api/setting/room/list',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.restaurants = res.body.Data
	            	} else {
	            		that.openMessage("餐厅列表获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //打开新增页面
		    fnOpenRestaurant(roomId){
		    	var that = this
		    	that.addFormVisible = true
				that.roomID = roomId
				if(that.roomID) {
                    that.fnGetRestaurantById()
				} else {
		    	    //新增状态清除原有的数据
                    that.addForm = {
                        name : '',
						allowShare : "0",
						capacity : 0
                    }
				}
		    },
	      	//新增或修改
	      	fnAddRestaurant(){
	      		var that = this
		    	var params = {
	      		    ID : that.roomID,
		    		Name : that.addForm.name,
                    AllowShare : parseInt(that.addForm.allowShare)?true:false,
                    Capacity : parseInt(that.addForm.capacity)
		    	}

	            Svc.fnPostData('/api/setting/room/save',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.addFormVisible = false
	            		that.openMessage("操作成功！",'success')
	            		that.fnGetRestaurant()
	            	} else {
	            		that.openMessage("操作失败！" + res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
			//获取指定ID的餐厅信息
            fnGetRestaurantById(){
				var that = this
                that.restaurants.forEach(function (item,index) {
                    if (item.ID === that.roomID) {
                        that.addForm.name = item.Name
                        that.addForm.allowShare = item.AllowShare?"1":"0"
                        that.addForm.capacity = item.Capacity
                    }
                })
			},
            //获取开始日期
            fnGetStart(val){
                if (val) {
                    this.filters.StartDate = moment(val).format('YYYY-MM-DD')
                } else {
                    this.filters.StartDate = val
                }
            },
			//打开包厢使用状态页面
            fnOpenUseState(){
                var that = this
                that.useFormVisible = true
			},
			//查询所有包厢的使用状态
            fnGetUseState(){
                var that = this
                that.allUseDateHeader = []
                that.bookingInfo = []
				var params = {
                    Start: that.filters.StartDate,
                    End: ''
				}
                Svc.fnPostData('/api/meal/roomusage',params,function(res){
                    if (res.body.ErrCode == 0){
						that.allUseDate = res.body.Data
						that.allUseDate.forEach(function (item,index) {
						    if (index === 0) {
						        item.BookingInfo.forEach(function (t) {
                                    that.allUseDateHeader.push(t.Date)
                                })
							}
							that.bookingInfo.push(item.BookingInfo)
                        })
                    } else {
                        that.openMessage("包厢状态获取失败！",'error')
                    }
                },function(res){
                    that.openMessage("网络错误，请重新！",'error')
                })
			},
		    //删除
		    fnDelete(id){
		    	var that = this
		    	that.$confirm('您确认删除本条记录吗？', '提示', {
					type: 'warning'
				}).then(function(){
					Svc.fnPostData('/api/setting/room/remove',{ID:id},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.openMessage("删除操作成功！",'success')
		            		that.fnGetRestaurant()
		            	} else {
		            		that.openMessage("删除操作失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
				})
		    },
		    //排序 -> 上移
		    fnSortUpward(index){
		    	var that = this
		    	if (index != 0) {
		    		var oldValue = that.restaurants[index]
		    		var newValue = that.restaurants[index-1]
		    		Vue.set(that.restaurants, index, newValue)
		    		Vue.set(that.restaurants, index-1, oldValue)
		    		that.hasSolt = false
		    	}
		    },
		    //排序 -> 下移
		    fnSortDown(index){
		    	var that = this
		    	if (index != that.restaurants.length - 1) {
		    		var oldValue = that.restaurants[index]
		    		var newValue = that.restaurants[index+1]
		    		Vue.set(that.restaurants, index, newValue)
		    		Vue.set(that.restaurants, index+1, oldValue)
		    		that.hasSolt = false
		    	}
		    },
		    //保存排序
		    fnSaveSolt(){
		    	var that = this
		    	var restaurantIds = []
		    	for (var i=0;i<that.restaurants.length;i++) {
		    		restaurantIds.push(parseInt(that.restaurants[i].ID))
		    	}
		    	
		    	Svc.fnPostData('/api/setting/room/order',{IDs : restaurantIds},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.hasSolt = true
	            		that.openMessage("新顺序保存成功！",'success')
	            	} else {
	            		that.openMessage("新顺序保存失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    }
		},
		mounted() {
			//获取所有餐厅
		    this.fnGetRestaurant()
		}
	}
</script>

<style scoped>
	.restaurants-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
	
	.sort{
		position: absolute;
		right: 3%;
	}
	
	.sort-icon{
	    font-size: 23px;
	    margin-right: 6px;
	    margin-top: 3px;
	    cursor: pointer;
	}
</style>